<template>
  <PageWrapper :sidebarWidth="300">
    <template #sidebar>
      <DepartTree @select="onTreeSelect" />
    </template>
    <a-card :bordered="false">
      <a-tabs defaultActiveKey="user-info">
        <a-tab-pane tab="基本信息" key="base-info" forceRender>
          <DepartBaseInfoTab :data="departData" />
        </a-tab-pane>
        <a-tab-pane tab="用户信息" key="user-info">
          <DepartUserInfoTab :data="departData" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup name="system-depart-user">
  import { provide, ref } from "vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { PageWrapper } from "/@/components/Page"
  import DepartTree from "./components/DepartTree.vue"
  import DepartBaseInfoTab from "./components/DepartBaseInfoTab.vue"
  import DepartUserInfoTab from "./components/DepartUserInfoTab.vue"

  const { prefixCls } = useDesign("depart-user")
  provide("prefixCls", prefixCls)

  // 当前选中的部门信息
  let departData = ref({})

  // 左侧树选择后触发
  function onTreeSelect(data) {
    departData.value = data
  }
</script>

<style lang="less">
  @import "./index.less";
</style>
